<template>
  <div class="register-container">
    <el-card class="register-card">
      <template #header>
        <h2 class="register-title">用户注册</h2>
      </template>
      
      <el-form
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules"
        label-position="top"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
          <div class="form-tip">用户名长度为3-20个字符，只能包含字母、数字和下划线</div>
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
          <div class="form-tip">密码长度至少6位，建议包含字母和数字</div>
        </el-form-item>

        <el-form-item prop="confirmPassword" label="确认密码">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <div class="error-message" v-if="errorMsg">
          <el-alert
            :title="errorMsg"
            type="error"
            show-icon
            :closable="true"
            @close="errorMsg = ''"
          />
        </div>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            class="register-button"
            @click="handleRegister"
          >
            注册
          </el-button>
          <el-button
            class="login-link"
            @click="$router.push('/login')"
          >
            已有账号？去登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { register } from '@/api/auth'

const router = useRouter()
const loading = ref(false)
const errorMsg = ref('')

const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (registerForm.confirmPassword !== '') {
      registerFormRef.value?.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const validateUsername = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (!/^[a-zA-Z0-9_]{3,20}$/.test(value)) {
    callback(new Error('用户名只能包含字母、数字和下划线，长度3-20位'))
  } else {
    // 检查用户名中是否包含特殊字符
    if (/[^a-zA-Z0-9_]/.test(value)) {
      callback(new Error('用户名不能包含特殊字符'))
      return
    }
    callback()
  }
}

const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    // 密码强度检查
    let strength = 0
    if (/[a-z]/.test(value)) strength++  // 包含小写字母
    if (/[A-Z]/.test(value)) strength++  // 包含大写字母
    if (/[0-9]/.test(value)) strength++  // 包含数字
    if (/[^a-zA-Z0-9]/.test(value)) strength++  // 包含特殊字符
    
    if (strength < 2) {
      callback(new Error('密码强度较弱，建议包含字母、数字或特殊字符'))
    } else {
      if (registerForm.confirmPassword !== '') {
        registerFormRef.value?.validateField('confirmPassword')
      }
      callback()
    }
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validateUsername, trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePassword, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ]
}

const registerFormRef = ref()

const handleRegister = async () => {
  if (!registerFormRef.value) return
  
  // 清除之前的错误消息
  errorMsg.value = ''
  
  try {
    await registerFormRef.value.validate()
    loading.value = true
    
    // 创建一个请求数据对象，与用户管理页面保持一致
    const requestData = {
      username: registerForm.username,
      password: registerForm.password,
      role: 'USER' // 确保注册为普通用户
    }
    
    console.log('准备发送注册请求，数据:', requestData)
    
    // 发送注册请求
    const response = await register(requestData)
    
    console.log('注册请求响应:', response)
    
    // 参考用户管理页面的响应处理方式
    if (response === true || 
        response.code === 200 || 
        response.code === 0 || 
        response.status === 'success' || 
        response.status === 200 || 
        (response && Object.keys(response).length === 0)) {
      ElMessage.success('注册成功，请登录')
      
      // 确保在成功注册后清除任何可能导致自动登录的状态
      localStorage.removeItem('token')
      sessionStorage.removeItem('token')
      
      // 尝试使用router跳转
      try {
        router.push('/login')
      } catch (e) {
        console.error('路由跳转失败，尝试使用window.location:', e)
      }
      
      // 延迟跳转，确保消息显示，同时作为备用方案
      setTimeout(() => {
        // 获取当前应用的基础路径
        const basePath = window.location.pathname.split('/').slice(0, -1).join('/') || '/'
        
        // 如果还在注册页面，使用完整的URL确保正确跳转到登录页面
        if (window.location.href.includes('register')) {
          console.log('使用window.location跳转到登录页面')
          window.location.href = `${basePath === '/' ? '' : basePath}/login`
        }
      }, 800) // 增加延迟时间确保消息显示和状态清除
    } else {
      // 如果响应不符合预期
      if (!response) {
        throw new Error('注册失败：服务器返回空响应')
      }
      errorMsg.value = response.message || response.msg || response.error || '注册失败，请稍后重试'
      throw new Error(errorMsg.value)
    }
  } catch (error) {
    console.error('注册失败:', error)
    // 尝试从错误对象中提取更详细的错误信息
    let errorMessage = '注册失败'
    
    if (error.response) {
      // 服务器响应了，但状态码不在2xx范围内
      console.error('错误响应状态:', error.response.status)
      console.error('错误响应数据:', error.response.data)
      
      // 尝试从响应中提取错误信息
      errorMessage = error.response.data?.message || 
                    error.response.data?.msg || 
                    error.response.data?.error ||
                    `服务器错误 (${error.response.status})`
                    
      // 如果是500错误，可能是用户名已存在
      if (error.response.status === 500) {
        errorMessage = '注册失败，可能是用户名已存在或服务器内部错误'
      } else if (error.response.status === 400) {
        errorMessage = '注册失败，请检查输入信息是否正确'
      } else if (error.response.status === 409) {
        errorMessage = '用户名已存在，请更换用户名'
      }
    } else if (error.request) {
      // 请求已发送，但没有收到响应
      errorMessage = '服务器无响应，请检查网络连接'
    } else {
      // 请求设置时出现问题
      errorMessage = error.message || '请求错误'
    }
    
    errorMsg.value = errorMessage
    ElMessage.error(errorMessage)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.register-card {
  width: 400px;
  
  :deep(.el-card__header) {
    text-align: center;
    padding: 20px;
  }
}

.register-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.register-button {
  width: 100%;
  margin-bottom: 10px;
}

.login-link {
  width: 100%;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.error-message {
  margin-bottom: 15px;
}
</style> 